<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <title>订单管理</title>
    <style type="text/css">
    body {
        background: #f3f3f3;
        font-size: 14px;

    }
    .aui-list-view{
        background: #f3f3f3;
    }
    .orderList li{
        margin-bottom: 15px;
        background: #fff;
    }
    .status{
        color: #9c9c9c;
    }
    .orderList li>div{
        position: relative;
        overflow: hidden;
        padding: 10px;
    }
    .orderList li>div:before{
        border-bottom: 1px solid #c8c7cc;
        -webkit-transform: scale(0.5);
        content:"";
        position: absolute;
        bottom: 0;
        right: -100%;
        left: -100%;
    }
    .orderMiddle  tapmode onclick="openToTwo('orderInfo')"p{
        color: #000;
    }
    .orderFooter>span{
        display: block;
        border-radius: 5px;
        background: #ff3333;
        color: #fff;
        padding:6px 10px;
        margin-right: 15px;
    }
    .orderFooter>span:first-of-type{
        margin-right: 0;
    }

    .sharePicker{
        position: fixed;
        bottom: 0;
        -webkit-transform: translateY(160px);
        height: 160px;
        overflow-y:auto; 
        -webkit-transition:  .5s;
        transition:  .5s;
        z-index: 9999;
        text-align: center;
        width: 100%;
    }
    .pickAnimate{
        -webkit-transform: translateY(00px);
    }
    .pickAnimate li:last-of-type{
        background: #f5f5f5;
    }
    .setOffer{
        background: #fff;
    }
    .weixin{
        display: inline-block;
    }
    .weixin img{
        width: 80px;
    }
    .pickAnimate ul{
        margin: 0;
    }
    </style>
</head>
<body >
    <div class="contain">
        <ul class="aui-list-view orderList ">
            <li>
                <div class="orderTop">
                    订单号：20161020214587444512
                    <span class="aui-pull-right status">待付款</span>
                </div>
                <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                    <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                    <p class="money">订单金额：<span>500.00</span></p>
                    <p class="sum">商品数量：<span>200</span></p>
                    <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                </div>
                <div class="orderFooter">
                    <span class="pay aui-pull-right"  tapmode onclick="openToTwo('orderInfo')">付款</span>
                    <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                </div>
            </li>
            <li>
                <div class="orderTop">
                    订单号：20161020214587444512
                    <span class="aui-pull-right status">待发货</span>
                </div>
                <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                    <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                    <p class="money">订单金额：<span>500.00</span></p>
                    <p class="sum">商品数量：<span>200</span></p>
                    <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                </div>
                <div class="orderFooter">
                    <span class="pay aui-pull-right">提醒发货</span>
                    <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                </div>
            </li>
            <li>
                <div class="orderTop">
                    订单号：20161020214587444512
                    <span class="aui-pull-right status">已发货</span>
                </div>
                <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                    <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                    <p class="money">订单金额：<span>500.00</span></p>
                    <p class="sum">商品数量：<span>200</span></p>
                    <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                </div>
                <div class="orderFooter">
                    <span class="pay aui-pull-right">确认收货</span>
                    <span class="logistics aui-pull-right">查看物流</span>
                    <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                </div>
            </li>
            <li>
                <div class="orderTop">
                    订单号：20161020214587444512
                    <span class="aui-pull-right status">已完成</span>
                </div>
                <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                    <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                    <p class="money">订单金额：<span>500.00</span></p>
                    <p class="sum">商品数量：<span>200</span></p>
                    <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                </div>
                <div class="orderFooter">
                    <span class="pay aui-pull-right">再次购买</span>
                    <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                </div>
            </li>
        </ul>
    </div>

    <!-- 弹出分享 -->
    <div class="sharePicker">
         <ul class="aui-list-view setOffer">
             <li class="aui-list-view-cell"  >
                <div class="weixin" tapmode onclick="shareWeChat()">
                 <img src="../../image/weixin.png" >
                    <p>分享到微信</p>
                 </div>
                <div class="weixin" tapmode onclick="shareQQ()">
                 <img src="../../image/QQ.png" >
                    <p>分享到QQ</p>
                 </div>
             </li>
             <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                 取消
             </li>
         </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript">
apiready = function() {
    api.parseTapmode();
}


// mui遮罩
var mask = mui.createMask(hidePicker);

// 关闭遮罩
function hidePicker(){
    $(".sharePicker").removeClass("pickAnimate");
    mask.myclose();
    removeBodyLayer();
}
//弹出分享
function share(){
    setBodyLayer();
    mask.show();
    $(".sharePicker").addClass("pickAnimate");
}
//QQ分享
function shareQQ(){
    var qq = api.require('QQPlus');
    qq.installed(function(retInstall, errInstall) {
        if (retInstall.status) {//已安装，就登陆
            qq.login(function(retLogin, errLogin) {
                if(retLogin.status){//登录成功
                    qq.shareNews({
                        url: 'http://sports.sina.com.cn/',
                        title: '新闻分享测试',
                        description: '新闻描述测试',
                        imgUrl: 'http://k.sinaimg.cn/n/sports/transform/20161125/bn4r-fxyawmm3366300.jpg/w570b3a.jpg'
                    },function(retShare,errShare){
                        if (retShare.status){
                            alert("分享成功！");
                        } else {
                            if(errShare.msg=="cancel"){
                                api.toast({
                                    msg:"已取消分享"
                                })
                            }
                        }
                    });
                }else{//登录失败
                    api.toast({
                        msg:"QQ登录失败"
                    })
                }
            })
        } else {
            api.toast({
                msg:"您还没没有安装QQ"
            })
        }
    });
    hidePicker();
}
//微信分享
function shareWeChat(){
    var wx = api.require('wx');
    wx.isInstalled(function(retInstall, errInstall) {
        if (retInstall.installed) {//已安装，就登陆
            wx.shareWebpage({
                apiKey: '',
                scene: 'timeline',
                title: '测试标题',
                description: '分享内容的描述',
                thumb: 'widget://a.jpg',
                contentUrl: 'http://sports.sina.com.cn/'
            }, function(ret, errShare) {
                if (ret.status) {
                    api.toast({
                        msg:"分享成功"
                    })
                } else {
                    var message;
                    switch(errShare.code){
                        case -1:
                            message="未知错误";
                            break;
                        case 1:
                            message="未知错误";
                            break;
                        case 2:
                            message="您已取消分享";
                            break;
                        case 3:
                            message="分享失败，请稍后重试";
                            break;
                        case 4:
                            message="暂时还未授权，请联系管理员";
                            break;
                        case 5:
                            message="服务暂不支持";
                            break;
                    }
                    api.toast({
                        msg:message
                    })
                }
            });
        } else {
            api.toast({
                msg:"您还没没有安装微信"
            })
        }
    });
    hidePicker();
}
</script>
</html>